<template>
  <div class="app-container">
    <el-card class="card">
      <MyNavBar style="margin-bottom: 20px">
        <template #after>
          <el-button
            type="success"
            class="el-icon-edit"
            size="small"
            @click="addMenusClick"
          >
            添加菜单</el-button>
        </template>
      </MyNavBar>
      <el-table
        :data="menusList"
        style="width: 100%"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'points'}"
        :header-cell-style="{background:'#eee',color:'#606266',borderBottom:'1px solid #ccc'}"
      >
        <!-- 表头 -->
        <el-table-column
          label="标题"
          prop="title"
          width="200"
        />
        <el-table-column
          label="权限点代码"
          prop="code"
        />
        <el-table-column
          label="操作"
          prop="id"
          width="120"
        >
          <template v-slot="{row}">
            <el-button type="primary" icon="el-icon-edit" circle @click="editMenusClick(row)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteMenusClick(row)" />
          </template>
        </el-table-column>
      </el-table>
      <MenuDialog :visible.sync="isShow" :edit-data="editData" :is-data="data" @success="getMenusList()" />
    </el-card>
  </div>

</template>

<script>
import MenuDialog from './menuDialog.vue'
import { getMenusAPI, deleteMenusAPI } from '@/api/index'
import MyNavBar from '@/components/MyNavBar/MyNavBar.vue'
export default {
  name: 'Menu',
  components: {
    MenuDialog,
		MyNavBar
  },
  data() {
    return {
      menusList: [],
      isShow: false,
      editData: {},
      data: [{
        title: '主导航',
        id: '',
        pid: 0,
        childs: []
      }]
    }
  },
	created() {
		this.getMenusList()
	},
	methods: {
		// 获取菜单的列表信息
		async	getMenusList() {
			const res = await getMenusAPI()
			// 树形结构
			res.map((item) => {
        if (item.childs) {
					item.points = item.childs
					delete item.childs
        }
      })
			this.menusList = res
			this.data.childs = this.menusList
		},
		// 点击添加按钮，添加菜单
		addMenusClick() {
			this.editData = null
			this.isShow = true
		},
		// 点击编辑按钮，编辑菜单
		editMenusClick(row) {
			this.editData = row
			this.isShow = true
		},
		// 点击删除按钮，删除当前行的菜单数据
		async deleteMenusClick(row) {
			try {
				await this.$confirm('确定要删除该菜单吗？')
				await deleteMenusAPI(row.id)
				this.getMenusList()
				this.$message.success('删除成功！')
			} catch (err) {
				console.log(err);
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 15px;
}
.el-button--primary {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
.el-button--danger {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
// el-table数据图标的更换
::v-deep .el-tree {
	.el-tree-node__expand-icon.expanded {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

/*有子节点 且未展开*/
::v-deep .el-table{
	.el-table__expand-icon .el-icon-arrow-right:before {
		background: url('~@/assets/images/n5.png') no-repeat;
		content: '';
		display: block;
		width: 22px;
		height: 22px;
		font-size: 22px;
		background-size: 22px;
		line-height: 22px;
	}
}
/*有子节点 且已展开*/
::v-deep .el-table {
	.el-table__expand-icon--expanded{
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
}
::v-deep .el-table{
	.el-table__expand-icon--expanded .el-icon-arrow-right:before {
		background: url('~@/assets/images/n10.png') no-repeat;
		content: '';
		display: block;
		width: 22px;
		height: 22px;
		font-size: 22px;
		background-size: 22px;
	}
}
/*没有子节点*/
::v-deep .el-table{
	.el-table__placeholder::before {
		background: url('~@/assets/images/n4.png') no-repeat;
		content: '';
		display: block;
		width: 22px;
		height: 22px;
		font-size: 22px;
		background-size: 22px;
	}
}
::v-deep .el-table_1_column_1,
.cell  {
	overflow: hidden;
	vertical-align: middle;
	line-height: 29px !important;
}

::v-deep .el-table__indent{
	display: inline-block;
	width: 0;
	height: 0;
}

::v-deep .el-table__expand-icon,
::v-deep .el-table__placeholder{
		margin-right: 10px !important;
	display: inline-block;
}

</style>
